<template>
	<view class="orders">
		<!-- <view class="title">
			<view class="back">
				<img src="../../static/返回左.png" alt="">
				<view>
					返回
				</view>
			</view>
			<view class="title1">
				所有订单
			</view>

		</view> -->

		<view class="tab-box">
			<view class="tab-item" @click="testTabClick(index)" :class="tabIndex == index?'active':''"
				v-for="(item,index) in tabList" :key="index">
				{{item.name}}
			</view>
		</view>
		<view class="con">
			<view class="con-title">
				<view class="left">
					<img src="../../static/叉子.png" alt="">
					<view>
						美食订单
					</view>

				</view>
				<view class="right">
					待付款
				</view>
			</view>
			<view class="con1">
				<img src="../../static/order1.png" alt="">
				<view class="info">
					<view class="item1">
						费德勒.欧德聚：中西...
					</view>
					<view class="item2">
						就餐方式：移动端送餐

					</view>
					<view class="item2">
						订单时间：2020/12/30 12:00

					</view>
				</view>
				<view class="pic">

					<img src="../../static/火.png" alt="">
					<img src="../../static/火.png" alt="">
				</view>
			</view>
			<view class="con2">
				点餐 7 项，总计 ¥286
			</view>
			<view class="con3">
				<view class="item">
					<view class="">
						取消订单
					</view>
				</view>
				<view class="it">
					<view class="">
						立即支付
					</view>

				</view>
			</view>

		</view>
		<view class="con">
			<view class="con-title">
				<view class="left">
					<img src="../../static/五角星.png" alt="">
					<view>
						游玩订单
					</view>

				</view>
				<view class="right">
					已完成
				</view>
			</view>
			<view class="con1">
				<img src="../../static/order2.png" alt="">
				<view class="info">
					<view class="item1">
						EDM游戏厅
					</view>
					<view class="item2">
						游玩地点：娱乐区 W73

					</view>
					<view class="item2">
						订单时间：2020/12/30 12:00

					</view>
				</view>
				<view class="pic">
					<img src="../../static/火.png" alt="">
					<img src="../../static/火.png" alt="">
					<img src="../../static/火.png" alt="">
				</view>
			</view>
			<view class="con2">
				兑币 200 个，总计 ¥600
			</view>
			<view class="con3">
				<view class="item">
					<view class="">
						删除订单
					</view>
				</view>

			</view>

		</view>
		<view class="con">
			<view class="con-title">
				<view class="left">
					<img src="../../static/购物篮.png" alt="">
					<view>
						购物订单
					</view>

				</view>
				<view class="right">
					已完成
				</view>
			</view>
			<view class="con1">
				<img src="../../static/order3.png" alt="">
				<view class="info">
					<view class="item1">
						香奈儿CHANEL
					</view>
					<view class="item2">
						购物地点：休闲区P16

					</view>
					<view class="item2">
						订单时间：2020/12/30 12:00

					</view>
				</view>
				<view class="pic">
					<img src="../../static/火.png" alt="">
					<img src="../../static/火.png" alt="">
					<img src="../../static/火.png" alt="">
				</view>
			</view>
			<view class="con2">
				购物 3 项，总计 ¥6800
			</view>
			<view class="con3">
				<view class="item">
					<view class="">
						删除订单
					</view>
				</view>

			</view>

		</view>
		<view class="con">
			<view class="con-title">
				<view class="left">
					<img src="../../static/无线设备.png" alt="">
					<view>
						咖助理
					</view>

				</view>
				<view class="right">
					已完成
				</view>
			</view>
			<view class="con1">
				<img src="../../static/order1.png" alt="">
				<view class="info">
					<view class="item1">
						主题专网
					</view>
					<view class="item2">
						开通套餐：流量包300MB

					</view>
					<view class="item2">
						订单时间：2020/12/30 12:00

					</view>
				</view>
				<view class="pic">

					<img src="../../static/火.png" alt="">
					<img src="../../static/火.png" alt="">
				</view>
			</view>
			<view class="con2">
				开通 1 项，总计 ¥286
			</view>
			<view class="con3">
				<view class="item">
					<view class="">
						删除订单
					</view>
				</view>

			</view>


		</view>
		<view class="bg">

		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				tabList: [{
					name: "全部"
				}, {
					name: "待付款"
				}, {
					name: "已付款"
				}, {
					name: "已完成"
				}]
			}
		},
		methods: {
			testTabClick(index) {
				console.log(index)
				this.tabIndex = index
			}
		}
	}
</script>
<style lang="scss">
	.orders {
		background-color: #f2f2f2;

		.tab-box {
			background-color: #fff;
			height: 3rem;
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 1.2rem;

			.tab-item {
				padding-bottom: .5rem;
				height: 3rem;
				width: 25%;
				flex-shrink: 0;
				// padding: 24rpx;
				position: relative;
				transition: all 0.2s linear;
				// text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;


				&.active {
					color: rgb(60, 102, 229);

					&::after {

						content: '';
						width: 50%;
						position: absolute;
						left: 50%;
						transform: translateX(-50%) scaleX(1);
						color: rgb(60, 102, 229);
						bottom: 20rpx;
						border-bottom: .1rem solid rgb(60, 102, 229);
					}
				}
			}
		}

		.title {
			height: 3rem;
			width: 100%;
			background-color: #fff;
			padding-left: .3rem;
			display: flex;
			align-items: center;
			margin-bottom: .1rem;

			.back {
				display: flex;
				align-items: center;

				img {
					width: .8rem;
					height: .8rem;
					margin-right: .3rem;

				}

				view {
					font-size: .9rem;
				}
			}

			.title1 {
				padding-left: 7.6rem;
				font-weight: 600;
				font-size: 1rem;
			}
		}

		.con {
			margin-bottom: .5rem;
			height: 13.5rem;
			background-color: #fff;
			padding: 0rem .5rem;

			.con-title {
				height: 2rem;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				// background-color: yellow;
				margin-bottom: .2rem;

				.left {
					display: flex;
					align-items: center;

					img {
						margin-right: .2rem;
						height: 1.5rem;
						width: 1.5rem;
					}
				}

				.right {
					color: orange;
				}
			}


			.con1 {
				display: flex;
				height: 5rem;
				width: 100%;
				padding-top: .5rem;

				img {
					height: 5rem;
					width: 6.5rem;
					border-radius: .5rem;
					margin-right: .5rem;
				}

				.info {
					width: 70%;
					height: 4rem;

					.item1 {
						margin-bottom: .8rem;
					}

					.item2 {
						font-size: .7rem;
						color: #8a8a8a;
					}
				}

				.pic {
					display: flex;

					img {
						height: 0.8rem;
						width: 0.8rem;
					}
				}
			}

			.con2 {
				margin-top: .2rem;

				height: 2rem;
				width: 100%;
				align-items: center;
				display: flex;
				justify-content: end;

			}

			.con3 {
				display: flex;
				align-items: center;
				justify-content: end;
				height: 3rem;
				width: 100%;

				.item {
					margin-left: .6rem;
					width: 6rem;
					height: 2rem;
					display: flex;
					align-items: center;
					justify-content: center;
					border: .04rem #8a8a8a solid;
					border-radius: .3rem;

					view {
						font-size: .8rem;
					}

				}

				.it {
					margin-left: .6rem;
					width: 6rem;
					height: 2rem;
					display: flex;
					align-items: center;
					justify-content: center;
					border: .04rem orange solid;
					border-radius: .3rem;

					view {
						font-size: .8rem;
						color: orange;
					}

				}

			}


		}

		.bg {
			background-color: #f2f2f2;
			height: 15rem;
			width: 100%;
		}
	}
</style>
